/**Created by liaoyingchao on 2019-08-01.*/

<template>
  <div class="paytest">
    <div class="row">
      <input placeholder="clientid" v-model="clientid">
    </div>
    <div class="row">
      <input placeholder="orderno" v-model="orderno">
    </div>
    <div class="row">
      <input placeholder="prepayid" v-model="prepayid">
    </div>
    <div class="row">
      <button @click="toPay">to Pay</button>
    </div>
    <div class="success" v-if="showSuccess">
      <button @click="showSuccess = false">确定</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "paytest",
    components: {},
    data() {
      return {
        showSuccess: false,
        clientid: '101190725',
        orderno: '20190725053',
        prepayid: '9e007ea5f3b8119bcf5b5f3bfef6657b'
      }
    },
    methods: {
      toPay: function () {
        let url = 'http://tbdapp.deepermobile.com/app-vue/app/index.html#/checkout?clientid=' + this.clientid + '&orderno=' + this.orderno + '&prepayid=' + this.prepayid +'&redirectUrl=' + encodeURIComponent('http://120.27.68.231:8099/paytest/#/paytest')

        window.location.href = url
      }
    },
    created() {
      this.showSuccess = this.$route.query.result ? true : false
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped type="text/stylus">
  .paytest {
    overflow hidden
    position relative;
    padding 20px;
    .success {
      position absolute;
      z-index 1;
      left 0;
      right 0;
      top 0;
      bottom 0;
      padding 100px;
      background-color white;
      text-align center;
      button {
        font-weight 500;
        font-size 18px;
      }
    }
    .row {
      padding 5px;
      input {
        height 30px;
        width 100%;
      }

      button {
        background-color lightgreen;
        font-weight 500;
        font-size 18px;
      }
    }
  }
</style>